<template>
  <div class="auto-bg" :class="{ 'card-border': bordered, 'side-line': line }">
    <slot />
  </div>
</template>

<script setup>
const props = defineProps({
  bordered: Boolean,
  line: {
    type: String,
    default: '',
  },
})
</script>
<style lang="scss" scoped>
.side-line {
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    height: 100%;
    width: 4px;
    position: absolute;
    top: 0;
    left: 0;
    background: v-bind('props.line');
  }
}
</style>
